<template>
  <!-- 如果菜单项没有隐藏则显示 -->
  <template v-if="!item.meta || !item.meta.hidden">
    <el-sub-menu
      v-if="(onlyOneChild?.children || !onlyOneChild?.noShowingChildren) && item.meta?.alwaysShow"
      :index="pathResolve(item.path, basePath)"
      teleported
    >
      <template #title>
        <EcoIcon :icon="iconClass(item.meta)" />
        <span>{{ item.meta?.title }}</span>
      </template>
      <MenuItem v-for="child in item.children" :key="child.path" :is-nest="true" :item="child" :base-path="pathResolve(child.path, basePath)" />
    </el-sub-menu>
    <template v-else>
      <AppLink
        v-if="onlyOneChild?.meta"
        :to="{
          path: pathResolve(onlyOneChild.path, basePath),
          query: onlyOneChild.meta.params
        }"
      >
        <el-menu-item :index="pathResolve(onlyOneChild.path, basePath)" :class="{ 'submenu-title-noDropdown': !isNest }">
          <EcoIcon :icon="iconClass(onlyOneChild.meta)" />
          <template #title>
            <span>{{ onlyOneChild.meta.title }}</span>
          </template>
        </el-menu-item>
      </AppLink>
    </template>
  </template>
</template>
<script setup name="MenuItem" lang="ts" inheritAttrs="false">
import { RouteRecordRaw } from 'vue-router'
import { hasOneShowingChild, pathResolve } from '@/utils/router'
export interface MenuItemProps {
  item: RouteRecordRaw // 菜单项
  basePath: string // 基础路径
  isNest?: boolean // 是否为嵌套路由
}

// props 默认值
const props = withDefaults(defineProps<MenuItemProps>(), {
  item: () => ({}) as RouteRecordRaw,
  basePath: () => '',
  isNest: () => false
})

const { onlyOneChild } = hasOneShowingChild(props.item.children, props.item as RouteRecordRaw)
const iconClass = (mate: any) => {
  return mate.icon as string
}
</script>
<style lang="scss"></style>
